import { Callout } from '@/components'

# AtomValue

The AtomValue component provides an interface similar to Jotai's [useAtomValue](https://jotai.org/docs/core/use-atom#useatomvalue) hook as props, allowing declarative usage.

### props.atom

You can use Jotai's atom as is.

```tsx /AtomValue/
import { AtomValue } from '@suspensive/jotai'
import { atom } from 'jotai'

const countAtom = atom(1)

const Example = () => {
  return (
    <AtomValue atom={countAtom}>{(count) => <>count: {count}</>}</AtomValue>
  )
}
```

For Async Atom, it delegates the pending state of the Promise to the parent Suspense until the Promise resolves.

```tsx /AtomValue/
import { AtomValue } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { atom } from 'jotai'

const countAtom = atom(1)
const asyncDoubleCountAtom = atom(async (get) => {
  await delay(2000)
  return get(countAtom) * 2
})

const Example = () => (
  <Suspense fallback={'pending...'}>
    <AtomValue atom={asyncDoubleCountAtom}>
      {(count) => <>count: {count}</>}
    </AtomValue>
  </Suspense>
)
```

### Motivation

Similar to [`<Atom/>`](https://suspensive.org/docs/jotai/Atom), `<AtomValue/>` also does not clearly reveal which atoms are used internally in child components and whether they trigger Suspense.
